<template>
	<view class="configFontsize">
    <div class="contentList">
      <div class="addressDetails" v-for="(item,index) in addressList" :key="index">
        <div class="innerBox">
          <div class="leftContent">
            <div class="topCity">{{item.city}}</div>
            <div class="details">{{item.detailsAddress}}</div>
            <div>{{item.userInformation}}</div>
          </div>
          <div class="iconFont">
            <div class="tionDiv" @click="addressFun">
              <u-icon name="edit-pen-fill" color="#2979ff" size="28"></u-icon>
            </div>
          </div>
        </div>
        <div class="fineLine"></div>
      </div>
    </div>
    <view class="topAddress">
      <view class="add">
        <u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
        <div style="margin-left: 5rpx;">
          新增地址
        </div>
      </view>
    </view>
  </view>
</template>
<script>
export default{
		data(){
			return{
        addressList: [
          {
            city: '四川省 成都市 龙泉驿区',
            detailsAddress: '大面小区',
            userInformation: '张三 18988889999'
          },
          {
            city: '四川省 成都市 龙泉驿区',
            detailsAddress: '123小区',
            userInformation: '张三 18988889999'
          },
          {
            city: '四川省 成都市 龙泉驿区',
            detailsAddress: '大444小区',
            userInformation: '张三 18988889999'
          },
          {
            city: '四川省 成都市 龙泉驿区',
            detailsAddress: '6666小区',
            userInformation: '张三 18988889999'
          },
        ]
			}
		},
		onLoad(){
      
		},
		methods:{
      addressFun(){
        uni.navigateTo({
          url: '/pagesSon/editAddress/editAddress'
        });
      }
		}
	}
</script>
<style lang="scss" scoped>
  //@import url(); 引入公共css类

  @import "@/common/configStyle.scss";

  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: #fff;
  }
  .topAddress {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    display: flex;
    justify-content: center;
    view {
      width: fit-content;
      height: 60rpx;
      background-color: $ruyi-config-backColor;
      border-radius: 40px;
      padding: 10rpx 30rpx;
      display: flex;
      align-items: center;
      margin: 0 10rpx;
      overflow: hidden;
    }
  }
  .contentList {
    margin-top: 30rpx;
    width: 100%;
    .addressDetails {
      width: 100%;
      .innerBox {
        display: flex;
        justify-content: space-between;
        margin-top: $ruyi-config-marginTop;
        width: $ruyi-config-outSideWidth;
        padding: $ruyi-config-outSidePadding;
        .leftContent {
          div {
            margin-bottom: 10rpx;
          }
          .topCity {
            color: $ruyi-config-wordColor;
            font-size: 20rpx;
          }
          .details {
            font-weight: 600;
          }
        }
        .iconFont {
          height: 100%;
          position: relative;
          .tionDiv {
            position: absolute;
            top: 50%;
            right: 30rpx;
            transform: translateY(28rpx);
            height: 28rpx;
          }
        }
      }
    }
  }
</style>
